<template>
    <div>
        <el-table :data="showTableData" stripe style="width: 100%">
            <el-table-column prop="id" label="序号" width="200"></el-table-column>
            <el-table-column prop="typeImg" label="logo" width="200">
                <template v-slot:default="scope">
                    <img v-if="scope.row.typeImg" :src="scope.row.typeImg" style="width: 50px; height: 50px;">
                    <img v-else src="../assets/dcfl04.png" style="width: 50px; height: 50px;">
                </template>
            </el-table-column>
            <el-table-column prop="typeName" label="类型名称" width="200"></el-table-column>

            <el-table-column label="操作">
                <template v-slot:default="scope">
                    <el-button size="mini" type="success" icon="el-icon-view" slot="reference"
                               @click="getBusinessListOfType(scope.row)">查看商家列表
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-size="pageSize"
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
        >
        </el-pagination>

        <!--查看商家列表-->
        <div>
            <el-dialog title="商家列表" :visible.sync="businessListDialog">
                <el-table :data="businessList">
                    <el-table-column property="businessId" label="商家编号" width="100"></el-table-column>
                    <el-table-column prop="businessImg" label="商家logo" width="100">
                        <template v-slot:default="scope">
                            <img v-if="scope.row.businessImg" :src="scope.row.businessImg"
                                 style="width: 50px; height: 50px;">
                            <img v-else src="../assets/dcfl04.png" style="width: 50px; height: 50px;">
                        </template>
                    </el-table-column>
                    <el-table-column property="businessName" label="商家名称" width="240"></el-table-column>
                    <el-table-column property="businessAddress" label="商家地址" width="240"></el-table-column>
                    <el-table-column label="操作">
                        <template v-slot:default="scope">
                            <el-button type="success" icon="el-icon-edit" slot="reference"
                                       @click="editBusinessInfo(scope.row)">编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="编辑商家信息" :visible.sync="editBusinessDialog">
                <el-form :model="editBusinessForm" label-width="100px">
                    <el-form-item label="商家编号">
                        <el-input v-model="editBusinessForm.businessId" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="商家名称">
                        <el-input v-model="editBusinessForm.businessName"></el-input>
                    </el-form-item>
                    <el-form-item label="商家地址">
                        <el-input v-model="editBusinessForm.businessAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="商家logo">
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8089/business/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img :src="editBusinessForm.businessImg" class="edit-avatar">
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editBusinessDialog = false">取消</el-button>
                    <el-button type="primary" @click="updateBusinessInfo()">保存</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>

export default {
    name: "UserManagement",
    data() {
        return {
            businessTypeList: [],
            businessList: [],
            /***分页变量****/
            pageIndex: 1, // 第几页
            pageSize: 5, // 每页几条数据
            total: 0, // 总条目数
            showTableData: [], // 当前展示的数据
            businessListDialog: false,
            editBusinessDialog: false,
            editBusinessForm: {
                businessId: '',
                businessName: '',
                businessAddress: '',
                businessImg: ''
            },
            avatarUrl: '',
        }
    },
    created() {
        this.getAllBusinessType()
    },
    mounted() {
        //在组件被挂载到DOM后执行,在这里中,使用setTimeout()函数来延迟0.5秒执行代码块内的逻辑
        setTimeout(() => {
            // 获取总条目数
            this.total = this.businessTypeList.length;
            // 根据当前是第几页、每页展示几条，去截取需要展示的数据
            this.getShowTableData();
            console.log(this.showTableData)
        }, 500);
    },
    methods: {
        //获取所有用户信息
        getAllBusinessType() {
            this.axios.get('/business/getAllBusinessType', {})
                .then(response => {
                    this.businessTypeList = response.data.data
                })
                .catch(error => {
                    // console.log(error)
                    this.$message.info(error.data)
                })
        },
        getBusinessListOfType(row) {
            const typeId = row.id
            this.businessListDialog = true
            this.axios.get('/business/getBusinessListByType', {
                params: {
                    typeId: typeId
                }
            })
                .then(response => {
                    this.businessList = response.data.data
                })
                .catch(error => {
                    this.$message.info(error.data)
                })
        },
        editBusinessInfo(row) {
            this.editBusinessDialog = true;
            this.editBusinessForm = row;
            this.avatarUrl = row.businessImg
        },
        updateBusinessInfo() {
            this.axios.put('business/updateBusinessInfo', this.editBusinessForm).then(res => {
                this.$message.success(res.data.msg)
                this.editBusinessDialog = false
            })
        },
        handleAvatarSuccess(res) {
            // console.log(res)
            if (res.code) {
                this.editBusinessForm.businessImg = res.data;
            } else {
                this.$message.error('上传失败');
            }
        },
        beforeAvatarUpload(file) {//判断头像大小
            const isJPG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

        /********************分页*******************/
        //获取当前页数据
        getShowTableData() {
            // 获取截取开始索引
            let begin = (this.pageIndex - 1) * this.pageSize;
            // 获取截取结束索引
            let end = this.pageIndex * this.pageSize;
            // 通过索引去截取当前页要展示的数据
            this.showTableData = this.businessTypeList.slice(begin, end);
            // console.log(this.showTableData)
        },
        // 当前页数改变，重新截取
        handleCurrentChange(currentPage) {
            // console.log(currentPage)
            this.pageIndex = currentPage;
            this.getShowTableData();
        },
        // 每个页面条目数改变，重新截取
        handleSizeChange(pageSize) {
            // console.log(pageSize)
            this.pageIndex = 1;
            this.pageSize = pageSize;
            this.getShowTableData();
        },
    }
}
</script>


<style scoped>
.edit-avatar {
    width: 120px;
    height: 120px;

    //border-radius: 50%;
}
</style>
